<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="mycanvas" width="600px" height="600px"></canvas>
		<script type="text/javascript">
			const ctx = document.getElementById('mycanvas').getContext('2d');
			
			setInterval(() => {
				ctx.clearRect(0 , 0 , 600 , 600);
				ctx.save();
				ctx.translate(300 , 300);
				ctx.beginPath();
				ctx.lineWidth = 10;
				ctx.strokeStyle = 'royalblue';
				ctx.arc(0 , 0 , 100 , 0 , Math.PI *2 , true);
				ctx.stroke();
				ctx.closePath();
				
				for(let i = 0 ; i < 60 ; i ++) {
					ctx.save();
					if(i % 5 === 0) {
						ctx.lineWidth = 3;
						ctx.rotate(Math.PI * 2 / 60 * i);
						ctx.moveTo(0 , -70);
						ctx.lineTo(0 , -85);
						ctx.stroke();
					} else {
						ctx.lineWidth = 2;
						ctx.rotate(Math.PI * 2 / 60 * i);
						ctx.moveTo(0 , -80);
						ctx.lineTo(0 , -85);
						ctx.stroke();
					}
					ctx.restore();
				}
				
				// 获取当前时间
				let date = new Date();
				var hour = date.getHours() > 12 ? date.getHours() - 12 : date.getHours();
				var minute = date.getMinutes();
				var second = date.getSeconds();
				
				// 画中心圆
				ctx.beginPath();
				ctx.lineWidth = 2;
				ctx.arc(0 , 0 , 5 , 0 , Math.PI * 2 , true);
				ctx.strokeStyle = 'royalblue';
				ctx.stroke();
				ctx.closePath();
				
				// 画秒针
				ctx.save();
				ctx.beginPath();
				ctx.lineWidth = 1;
				ctx.rotate(Math.PI / 30 * second);
				ctx.moveTo(0 , 15);
				ctx.lineTo(0 , -68);
				ctx.stroke();
				ctx.closePath();
				ctx.restore();
				
				// 画分针
				ctx.save();
				ctx.beginPath();
				ctx.rotate(Math.PI / 30 * minute + Math.PI / 30 * second / 60);
				ctx.lineWidth = 2;
				ctx.moveTo(0 , 10);
				ctx.lineTo(0 , -55);
				ctx.stroke();
				ctx.closePath();
				ctx.restore();
				
				// 画时针
				ctx.save();
				ctx.beginPath();
				ctx.lineWidth = 3;
				ctx.rotate(Math.PI*2/12*hour + Math.PI/30*minute/12 + Math.PI/30*second/60/60);
				ctx.lineWidth = 3;
				ctx.moveTo(0 , 5);
				ctx.lineTo(0 , -40);
				ctx.stroke();
				ctx.closePath();
				ctx.restore();
				ctx.restore();
			} , 1000);
		</script>
	</body>
</html>
